<!DOCTYPE html>
<html lang="en">
<head>
        {% load static %}
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'jquery/jquery-3.2.1.js' %}"></script>
</head>
<body
        <div >
            <input type="text" id="d1" >+
            <input type="text" id="d2">=
            <input type="text" id="d3">
            <button id="d4" class="btn btn-warning">提交</button>
        </div>


<script>
    $("#d4").click(function (){
        var num1 = $("#d1").val();
        var num2 = $("#d2").val();
        console.log(num1, num2);

        //拿到参数后使用Ajax向后提交
        $.ajax({
            url:"#",  // 请求的地址
            type:"post",    // 请求的方式, 使用method()也可以
            headers: {"X-CSRFToken": "{{ csrf_token }}"},
            dataType: "json",
            data:{
                num1:num1,
                num2:num2},   //指定要提交给后端的数据
            success: function (res){ // 返回成功走sucess,接收后端返回的结果
                // 后端返回的数据都放在res里面
                console.log(res)
                $('#d3').val(res)
               // .val()里面什么都不写为取值， 如果里面写数据为设置值
            }
        });

    })
</script>
</body>

</html>